<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width:60%;
            margin:0 auto;
            background-color:aqua;
            min-height:220px;
        }
        h2{
            text-align:center;
            padding-top:10px;
        }
        p{
            width:90%;
            margin:0 auto;
            text-align:center;
        }
        input{
            box-sizing:border-box;
            width:60px;
        }
        p#result{
            margin:20px auto;
            height:40px;
            width:75%;
            padding:20px;
            border:1px dotted goldenrod;
            background-color:rgb(221,220,221);
            font-weight:bold;
        }
        #success{
            color:blue;
        }
        #error{
            color:red;
        }
    </style>
    <script>
        function Listenter(){
            a=document.getElementById("ge");
            b=document.getElementById("jiao");
            let ge=parseInt(a.value);
            let jiao=parseInt(b.value);
            console.log(`${ge}  ${jiao}`);
            c=document.getElementById("result");
            for(let i=0;i<=ge;i++){
                for(let j=0;j<=ge-i;j++){
                    if(i*2+j*4==jiao && i+j==ge){
                        res=document.getElementById("result");
                        res.innerHTML="<span id='success'>分别有鸡"+i+"只,"+"有兔子"+j+"只"+"</span>"
                        return;
                    }
                }
            }
            res=document.getElementById("result");
            res.innerHTML="<span id='error'>无解</span>"
        }
    </script>
</head>
<body>
    <div class="container">
        <h2>循环解决鸡兔同笼问题</h2>
        <p>鸡兔同笼，鸡兔一共<input type="text" id="ge">只，笼子里一共有脚<input type="text" id="jiao">，请问分别有多少个鸡和兔？<button onclick="Listenter()">计算</button>
        </p>
        <p id="result">

        </p>
    </div>
    
</body>
</html>